<template>
	<navbar titleText=""/>
	<view class="mianText">
		<view class="card">
			<image :src="page_data.img" class=".card-photo"></image>
		</view>
		<view class="textAll">
			<view class="name">
				<text>{{page_data.name}}</text>
			</view>
			<view class="author">
				<text>{{page_data.author}}</text>
			</view>
			<view class="album">
				<text>{{page_data.album}}</text>
			</view>
			<view class="score">
				<up-rate                         
				readonly
				active-color="#ED5B4D"
				modelValue="4"
				size="24rpx"
				gutter="16rpx"
				>
				</up-rate>
				<text class="score-text">{{page_data.score}}.0分</text>
			</view>
		</view>
	</view>
	<view class="line"></view>
	
	<view class="introduce">
		<view class="content-tittle">
			<text>简介</text>
		</view>
		<view class="content-exp">
			<text class="content-exp">{{page_data.introduce}}</text>
		</view>
	</view>
	
	<view class="line"></view>
	
	<view class="recommend">
		<view class="content-tittle">
			<text>相关视频</text>
		</view>
		<scroll-view scroll-x="true" class="scroll-X">
			<view v-for="(item,index) in video_data" :key="index" :data-vid="index" class="video-card" @click="toVideo">
				<image :src="item.img" class="video-photo"></image>
				<view class="video-text">{{item.name}}</view>
			</view>
			
		</scroll-view>
	</view>
	<view class="line"></view>
	<view class="footer">
		<view class="icon">
			<image class="icon-card" src="../../static/music_detail/icon-share.png"></image>
			<text class="icon-text">分享</text>
		</view>
		<view class="icon" v-if="!to_collect" @click="addCollect">
			<image class="icon-card" src="../../static/music_detail/icon-collect.png"></image>
			<text class="icon-text">收藏</text>
		</view>
		<view class="icon" v-if="to_collect">
			<image class="icon-card" src="../../static/music_detail/icon-collect2.png"></image>
			<text class="icon-text">已收藏</text>
		</view>
		<view class="play" @click="playMusic">
			<text v-if="!music_control">播放</text>
			<text v-if="music_control">停止</text>
		</view>
		<view class="view" @click="seeView">
			<text>看谱</text>
		</view>
	</view>
	<player v-if="music_control" :page_data ="page_data"></player>
	
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { reactive, ref, toRaw } from 'vue';
	import { useUserStore } from '../../stores/counter';
	
	const userStore =useUserStore()
	const app = getApp()
	const page_data = ref({})
	const video_data =ref([])
	const hid = ref()
	const music_control = ref(false)
	const to_viedo =ref(false)
	const to_collect = ref(false)
	onLoad((option)=>{
		getPageData(option)
		getVideoData(option)
		isCollect(option)
	})
	const getPageData = (option)=>{
		app.globalData.utils.request({   //获取主数据包
			url:"/all_products",
			success:res =>{
				page_data.value =res[option.hid]
			},
			fail:err =>{
				console.log(err)
			}
		})	
	}
	
	const getVideoData =(option)=>{
		app.globalData.utils.request({   //获取视频数据
			url:"/video",
			data:{
				hid:option.hid
			},
			success:res =>{
				video_data.value =res.data
				hid.value = res.hid
			},
			fail:err =>{
				console.log(err)
			}
		})	
	}
	const isCollect = (option)=>{
		if(userStore.collect_id ==''){
			uni.showToast({
				title:'请先登录',
				icon:'none'
			})
			setTimeout(()=>{
				uni.switchTab({
					url:"/pages/collect/index"
				})
			},1000)
		}
		if(userStore.collect_id !=''){
			for(let i =0;i<userStore.collect_id.length;i++){
				if(userStore.collect_id[i].collect_id == option.hid){
					to_collect.value= true
					return
				}
			}
		}
		to_collect.value= false
	}
	
	const addCollect = ()=>{
		app.globalData.utils.request({   		//储存收藏数据
			url:"/add_collect",
			data:{
				hid:hid.value,
				userid:uni.getStorageSync('user_info').userid
			},
			success:res =>{
				userStore.addCollcetId({
					collect_id:hid.value,
				})
				to_collect.value= true      //点亮已收藏
				uni.showToast({				//提醒
					title:'已收藏',
					icon:'none'
				})
				
			},
			fail:err =>{
				console.log(err)
			}
		})	
	}
	const toVideo =(e)=>{
		app.globalData.utils.toVideos(hid.value,e.currentTarget.dataset.vid)
		music_control.value =false
		
	}
	const playMusic =()=>{
		music_control.value =!music_control.value
	}
	const seeView =()=>{
		uni.navigateTo({
			url:'/pages/score/index?hid='+ hid.value
		})
	}
</script>

<style>
	.mianText{
		width: 750rpx;
		height: 232rpx;
		margin: 40rpx;
		display: flex;
	}
	.card-photo{
		width: 180rpx;
		height: 252rpx;
	}
	.textAll{
		padding-left: 20rpx;
	}
	.name{
		font-size: 26rpx;
		padding-bottom: 50rpx;
	}
	.author{
		font-size: 26rpx;
		color: #428687;
		padding-bottom: 28rpx;
	}
	.album{
		font-size: 24rpx;
		color: #666666;
		padding-bottom: 26rpx;
	}
	.score{
		display: flex;
	}
	.score-text{
		font-size: 20rpx;
		color: #999999;
		padding-left: 20rpx;
		
	}
	.line{
		height: 20rpx;
		width: 100%;
		background-color:#F5F5F5;
	}
	.introduce{
		width: 670rpx;
		height: 280rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		white-space: pre-wrap;
		overflow: hidden; 
		text-overflow: ellipsis; 
	}
	.content-tittle{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 40rpx;
	}
	.content-exp{
		padding-right: 20rpx;
		font-size: 20rpx;
		color: #666666;
		line-height:36rpx;
		letter-spacing:4rpx;
		text-indent: 2em;
	}
	.recommend{
		padding-left: 40rpx;
	}
	.scroll-X{
		white-space: nowrap;
		overflow: hidden;
		width: 670rpx;
		height: 235rpx;
		padding-bottom: 18rpx;
	}
	.video-card{
		width: 337rpx;
		height: 235rpx;
		margin-right: 20rpx;
		display: inline-block;
	}
	.video-photo{
		width: 337rpx;
		height: 190rpx;
	}
	.video-text{
		font-size: 27rpx;
		text-align: center;
		white-space: pre-wrap;
		overflow: hidden; 
		text-overflow: ellipsis; 
	}
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		
	}
	.icon{
		font-size:20rpx ;
		display: flex;
		flex-direction: column;
		margin-left: 40rpx;
		margin-right: 70rpx;
		align-items: center;
	}
	.icon-card{
		width: 36rpx;
		height: 34rpx;
	}
	.play{
		width: 156rpx;
		height: 72rpx;
		background-color:#428687 ;
		color: #FFFFFF;
		border-radius: 6rpx;
		box-sizing:border-box;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		margin-left: 48rpx;
		margin-right:50rpx ;
		text-align: center;
	}
	.view{
		width: 156rpx;
		height: 72rpx;
		background-color:#ED5B4E ;
		color: #FFFFFF;
		border-radius: 6rpx;
		box-sizing:border-box;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		text-align: center;
	}
</style>
